<template>
  <div>
    <a-row >
      <a-col :span="20"> <a-input :placeholder="placeholder" v-model="nValue" @change="inputChange" :title="nValue">
      </a-input></a-col>
      <a-col :span="4"><a-button icon="search" style="width: 100%;margin-top: 4px;" type="primary" @click="open"></a-button></a-col>
    </a-row>
    <a-modal
      :width="width"
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="visible=false"
    >
      <div ref="selectBox" class="selectdrop">
        <a-select
          style="width: 100%;"
          showSearch
          v-model="selectValue"
          :filterOption="filterOption"
          :placeholder="placeholder"
          allowClear
          :getPopupContainer="()=>this.$refs.selectBox"
        >
          <a-select-option v-for="item in TypeList" :key="item.DicValue" :value="nameofvalue=='name'?item.DicName:item.DicValue" >
            {{ item.DicName }}
          </a-select-option>
        </a-select>
      </div>
    </a-modal>

  </div>
</template>
<script>
export default {
  data () {
    return {
      nValue: '',
      selectValue: '',
      confirmLoading: false,
      visible: false,
      TypeList: []
    }
  },
  props: {
    value: {
      validator (value) {
        if (typeof value === 'undefined') {
          return true
        }
        if (typeof value === 'object') {
          return true
        }
        if (typeof value === 'string') {
          return true
        }
        if (typeof value === 'number') {
          return true
        }
      },
      required: true }, // 必填
    keyword: { type: String, default: '', required: true }, // 必填 字典值
    placeholder: { type: String, default: '请选择', required: false },
    nameofvalue: { type: String, default: 'name', required: false },
    title: { type: String, default: '请选择', required: false },
    width: { type: String, default: '400px', required: false },
    list: { type: Array, default: undefined, required: false }// 选填 如传list则不请求字典列表 用于表格内容过多时，避免过多请求
  },
  components: {},
  methods: {
    inputChange () {
      this.$emit('input', this.nValue)
    },
    handleOk () {
      this.visible = false
      this.nValue = this.selectValue
      this.$emit('input', this.nValue)
      this.$emit('change', this.nValue)
      const obj = this.TypeList.find(item => {
        return item.DicValue === this.nValue
      })
      this.$emit('rowchange', obj)
    },
    open () {
      this.selectValue = undefined
      this.visible = true
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getDataList () {
      this.$http.post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
        'Condition': 'DicKey',
        'Keyword': this.keyword
      }).then(res => {
        if (res.Success) {
          this.TypeList = res.Data.DictionaryDetailsList || []
        }
      })
    }
  },
  mounted () {},
  created () {},
  computed: {},
  watch: {
    keyword: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n) {
          if (this.list) {
            this.TypeList = [...this.list]
            return
          }
          this.getDataList()
        }
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler (n, o) {
        this.nValue = n
      }
    },
    list: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n && n.length > 0) {
          this.TypeList = [...n]
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-select-dropdown-menu-item{
    white-space:initial !important;
  }
</style>
